<template>
    <el-container>
      <el-table
          :data="goodsList"
          stripe
          style="width: 100%">
        <el-table-column
            prop="id"
            label="编号"
            width="80"
            align="center">
        </el-table-column>
        <el-table-column
            width="200"
            label="商品图片">
          <template v-slot="prop">
            <el-avatar shape="square" :size="50" :src="'http://localhost:3000' + prop.row.img"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
            prop="goodsname"
            label="商品名称"
            width="200"
            align="center">
        </el-table-column>
        <el-table-column
            prop="firstcatename"
            label="所属类型"
            width="200"
            align="center">
        </el-table-column>
        <el-table-column
            prop="secondcatename"
            label="所属二级类型"
            width="200"
            align="center">
        </el-table-column>
        <el-table-column
            prop="specsattr"
            label="商品规格"
            width="200"
            align="center">
          <template v-slot="prop">
            <el-tag type="danger" v-for="(item, index) in prop.row.specsattr.split(',')">{{item}}</el-tag>
          </template>
        </el-table-column>
  
        <el-table-column
            prop="status"
            align="center"
            label="是否启用">
          <template v-slot="prop">
            <el-tag type="success" v-if="prop.row.status===1">启用</el-tag>
            <el-tag type="danger" v-else>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            width="200px"
            label="操作">
          <template>
            <el-button type="primary" icon="el-icon-edit" circle ></el-button>
            <el-button type="danger" icon="el-icon-delete" circle ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          :page-size="pageInfo.size"
          layout="prev, pager, next"
          @current-change="changeGoods"
          @prev-click="changeGoods"
          @next-click="changeGoods"
          :total="goodsCount">
      </el-pagination>
    </el-container>
  </template>
  
  <script>
  import { mapState, mapActions } from 'vuex'
  
  export default {
      name: "Layout",
    data() {
        return {
          pageInfo: {
            size: 5,
          page: 1
        }
      }
    },
    created() {
        this.getGoodsCount()
      this.getGoodsListActions(this.pageInfo)
    },
    computed: {
        ...mapState( {
        goodsList: state => state.good.goodsList,
        goodsCount : state => state.good.goodsCount
      } )
    },
    methods: {
        ...mapActions('good', ['getGoodsCount', 'getGoodsListActions']),
      changeGoods(currentPage) {
          this.pageInfo.page = currentPage
          this.getGoodsListActions(this.pageInfo)
      }
    }
  }
  </script>
  
  <style scoped>
  .el-container{
    display: flex;
    flex-direction: column;
  }
  .el-pagination{
    margin-top: 2rem;
  }
  </style>